<template>
  <div class="blog-archive blog-section common-mobile-view">
    <el-date-picker
        v-model="currentYear"
        type="year" placeholder="请选择年份"
        style="width: 100px"
        @change="changeDateEvent"
    />

    <span class="total">共计{{ blogStore.blogList.length }}篇文章</span>

    <el-timeline class="time-line card-item">
      <el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
        <div class="item">
          <span class="date">{{ value.createTime }}</span>
          <span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
import { useBlogStore } from '@/store/blog.ts'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'

const blogStore = useBlogStore()
const router = useRouter()
const currentYear = ref(new Date())

onMounted(() => {
  blogStore.queryBlogByCondition({
    year: (new Date()).getFullYear()
  })
})

/**
 * 选择年份事件
 * @param value 年份
 */
const changeDateEvent = async (value: Date) => {
  await blogStore.queryBlogByCondition({
    year: value.getFullYear()
  })
}

/**
 * 点击查看博客按钮
 * @param index 索引
 */
const viewBlogClick = async (index: number) => {
  const blogId = blogStore.blogList[index].id
  await router.push({ name: 'BlogDetailId', params: { id: blogId } })
}
</script>

<style scoped lang="scss">
@use "@/styles/blog/blog.archive.module";
</style>
